import * as React from 'react';
import cx from 'classnames';
import styles from './styles/CountCard.less';
import { CountCardObject } from './interface';

export interface CountCardProps extends CountCardObject {
  className?: string;
  style?: React.CSSProperties;
  countStyle?: React.CSSProperties;
  type?: string; // 'single' | 'rate';
  onClick?: (data: any) => void;
}

class CountCard extends React.Component<CountCardProps, any> {
  public static propTypes = {};
  public static defaultProps = {
    type: 'rate',
  };

  public render() {
    const { icon, title, count, total, unit, className, style, countStyle, type, onClick } = this.props;
    return (
      <div className={cx(styles.container, className)} style={style}>
        <div className={styles.icon}>
          <img src={icon} title={title} />
        </div>
        <div className={styles.content}>
          <div>{title}</div>
          <div>
            {type === 'rate' ? (
              <>
                <span className={styles.count} style={countStyle} onClick={() => onClick?.({})}>
                  {count}
                </span>
                <span className={styles.sp}>/</span>
                <span className={styles.total} onClick={() => onClick?.({})}>
                  {total}
                </span>
              </>
            ) : (
              <span className={styles.count} style={countStyle} onClick={() => onClick?.({})}>
                {count}
              </span>
            )}
            <span>{unit}</span>
          </div>
        </div>
      </div>
    );
  }
}

export default CountCard;
